<html>
<head> 
    <script type="text/javascript" src="relation.js"></script>
    <script type="text/javascript" src="define.js"></script>
    <style>
        table,tbody {
            display: block;
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
            text-align: left;
        }

        tbody {
            overflow-y: scroll;
        }
        
        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            vertical-align: top;
        }

        table thead {
            width: calc(100% - 1em)
        }

        table thead th {
            background: #84acde;
            width: 15%;
        }

        table tbody td {
            width: 15%;
            text-align: left;
        }

        table th {
            border-left: 1px solid #000000;
            border-top: 1px solid #000000;
        }
        
        table td {
            border-left: 1px solid #000000;
            border-top: 1px solid #000000;
        }

        select {
            width: 200px;
        }
    </style><head> 
<body>
    <script>
        var selectAddIndex = -1
        document.onreadystatechange = function () {
            if(typeof skillManager == 'undefined'){
                skillManager = SkillManager();
                UpdatePosibleSkills();
            } 

            var selectAdd = document.getElementById("selectAdd");
            selectAdd.addEventListener("change", function(event) {
                let index = selectAdd.selectedIndex
                if(selectAddIndex != -1 && index == selectAddIndex){
                    return
                }
                selectAddIndex = index //解决触发两次的问题
                let skillName = selectAdd.options[index].innerHTML.split('|')[1]
                let backs = skillManager.GetBackSkills(skillName)
                ClearSelectOptions("selectBack")
                for(let back of backs)
                {
                    let sel = document.getElementById("selectBack");
                    let opt = document.createElement("option");
                    opt.innerHTML = back;
                    sel.appendChild(opt);
                }
            });
        }

        function ClearSelectOptions(selectname)
        {
            let sel= document.getElementById(selectname);
            sel.innerHTML = "";
            for(let i=0;i<sel.childNodes.length;i++){
                sel.removeChild(sel.options[0]);
                sel.remove(0);
                sel.options[0] = null;
            }
        }

        function UpdatePosibleSkills()
        {
            let posible_skills = skillManager.GetPosibleSkills();
            ClearSelectOptions("selectAdd")
            ClearSelectOptions("selectPosible")
            for(let skillName in posible_skills)
            {
                if(posible_skills[skillName].r == 0){
                    let sel = document.getElementById("selectAdd");
                    let opt = document.createElement("option");
                    opt.innerHTML = posible_skills[skillName].s;
                    sel.appendChild(opt);
                }else if(posible_skills[skillName].r > 0){
                    let sel = document.getElementById("selectPosible");
                    let opt = document.createElement("option");
                    opt.innerHTML = posible_skills[skillName].s;
                    opt.value = posible_skills[skillName].s;
                    sel.appendChild(opt);
                }
            }
        }

        function onbutton_add()
            {
                let sel = document.getElementById("selectAdd");
                let index = sel.selectedIndex ; 
                if(index == -1){
                    return;
                }
                let skillname = sel.options[index].innerHTML.split('|')[1]
                skillManager.RecordSkill(skillname)
                let t=document.getElementById("tableSave") ;  
                let tr=document.createElement("tr");  
                let td=document.createElement("td");  
                td.innerHTML=skillname;  
                tr.appendChild(td);  
                t.appendChild(tr);
                UpdatePosibleSkills()
            }


    </script>
    <div align="center"><label fontSize='large'>国王指意技能台 1.0</label></div>
    <p></p>
    <table >
        <tr>
            <th>技能台</th>
            <th><button onclick="onbutton_add()">&lt;=添加技能</button></p></th>
            <th>当前技能后置</th>
            <th>可能性技能</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>
                <table ID="tableSave" >
                </table>
            </td>
            <td>
                <select id="selectAdd" multiple size=30>
                </select>
            </td>
            <td>
                <select id="selectBack" multiple size=30>
                </select>
            </td>
            <td>
                <select id="selectPosible" multiple size=30>
                </select>
            </td>
            <td>
                1. 项目地址: https://gitee.com/smiletiger/king-means<br/>
                2. 界面过于简陋,请别在意,前端技术不行<br/>
                3. 操作方式：<br/>
                &nbsp;&nbsp;a. 开始玩战斗的时候, 打开该工具<br/>
                &nbsp;&nbsp;b. 点击‘添加技能’，会将你的选择加入到技能台里<br/>
                &nbsp;&nbsp;c. 最开始的时候，如果你有奥术飞弹，请添加'学习奥术飞弹'；如果已被替换为其它的比如火球术，请添加'学习火球术'<br/>
                &nbsp;&nbsp;d. 战斗中如果出现三个技能选择界面，请将你的选择添加到技能台<br/>
                &nbsp;&nbsp;e. 战斗中出现转盘，随机出现了几个技能，请将这些技能全部添加到技能台.(有一个硬伤，滚动的字母播报会遮挡这些技能的名字)<br/>
                &nbsp;&nbsp;f. 重新开始战斗时, 请F5刷新该工具<br/>
                4. 技能描述格式:  [技能类型]|[技能名称]|[前置距离]<br/>
                5. 前置距离：就是指前面要学多少个前置技能，才能学到该技能<br/>
                6. relation.js描述了技能之间的关系,如果你觉得技能关系不正确，在充分理解的情况下可以手动修改里面的数据
            </td>
        </tr>
    </table>
</body>
